<!--
 * @Author: your name
 * @Date: 2020-06-28 16:03:33
<<<<<<< HEAD
 * @LastEditTime: 2020-07-07 15:21:47
=======
<<<<<<< HEAD
 * @LastEditTime: 2020-07-07 16:35:09
=======
 * @LastEditTime: 2020-07-07 09:48:31
>>>>>>> 52544158493bcbcd2b1f73ec181f2011c8e4d1e8
>>>>>>> 034f828addb7db6b71fa378067908ca7b1eab22a
 * @LastEditors: Please set LastEditors
 * @Description: 今日特惠，热销
 * @FilePath: \JKShopping\jkshopping\src\pages\home\components\shopList.vue
--> 
<template>
  <div class="shopList">
    <!-- 今日特惠 -->
    <div class="sale">
      <h1>
        <svg
          t="1593482022387"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="27820"
          data-spm-anchor-id="a313x.7781069.0.i20"
          width="32"
          height="32"
        >
          <path
            d="M361.006719 218.446508l9.810252 3.570401-189.171773 519.779869-9.810252-3.570401 189.171773-519.779869Z"
            p-id="27821"
            fill="#1afa29"
            data-spm-anchor-id="a313x.7781069.0.i22"
            class="selected"
          />
          <path
            d="M554.11035 216.760983l48.238706 17.556281-184.944477 508.164692-48.238706-17.556281 184.944477-508.164692Z"
            p-id="27822"
            fill="#1296db"
            data-spm-anchor-id="a313x.7781069.0.i21"
            class
          />
          <path
            d="M784.938575 213.493621l84.039105 30.585691-183.101881 503.101864-84.039105-30.585691 183.101881-503.101864Z"
            p-id="27823"
            fill="#d4237a"
          />
        </svg>
        今/日/特/惠
        <svg
          t="1593482022387"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="27820"
          data-spm-anchor-id="a313x.7781069.0.i20"
          width="32"
          height="32"
        >
          <path
            d="M361.006719 218.446508l9.810252 3.570401-189.171773 519.779869-9.810252-3.570401 189.171773-519.779869Z"
            p-id="27821"
            fill="#1afa29"
            data-spm-anchor-id="a313x.7781069.0.i22"
            class="selected"
          />
          <path
            d="M554.11035 216.760983l48.238706 17.556281-184.944477 508.164692-48.238706-17.556281 184.944477-508.164692Z"
            p-id="27822"
            fill="#1296db"
            data-spm-anchor-id="a313x.7781069.0.i21"
            class
          />
          <path
            d="M784.938575 213.493621l84.039105 30.585691-183.101881 503.101864-84.039105-30.585691 183.101881-503.101864Z"
            p-id="27823"
            fill="#d4237a"
          />
        </svg>
      </h1>
      <van-grid :border="false" :column-num="3">
        <van-grid-item v-for="item of datas" :key="item.id">
          <router-link :to="{path:'/goodsDetails',query:{id:item.id}}">
            <div class="img">
              <van-image width="100%" height="100%" lazy-load :src="item.goods_thumb" />
            </div>
            <div>
              <p class="goods_name">{{item.goods_name}}</p>
              <p class="price">{{item.goods_price | rmb}}</p>
            </div>
          </router-link>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 当前热销 -->
    <div class="hotSale">
      <h1>
        <svg
          t="1593482022387"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="27820"
          data-spm-anchor-id="a313x.7781069.0.i20"
          width="32"
          height="32"
        >
          <path
            d="M361.006719 218.446508l9.810252 3.570401-189.171773 519.779869-9.810252-3.570401 189.171773-519.779869Z"
            p-id="27821"
            fill="#1afa29"
            data-spm-anchor-id="a313x.7781069.0.i22"
            class="selected"
          />
          <path
            d="M554.11035 216.760983l48.238706 17.556281-184.944477 508.164692-48.238706-17.556281 184.944477-508.164692Z"
            p-id="27822"
            fill="#1296db"
            data-spm-anchor-id="a313x.7781069.0.i21"
            class
          />
          <path
            d="M784.938575 213.493621l84.039105 30.585691-183.101881 503.101864-84.039105-30.585691 183.101881-503.101864Z"
            p-id="27823"
            fill="#d4237a"
          />
        </svg>
        当/前/热/销
        <svg
          t="1593482022387"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="27820"
          data-spm-anchor-id="a313x.7781069.0.i20"
          width="32"
          height="32"
        >
          <path
            d="M361.006719 218.446508l9.810252 3.570401-189.171773 519.779869-9.810252-3.570401 189.171773-519.779869Z"
            p-id="27821"
            fill="#1afa29"
            data-spm-anchor-id="a313x.7781069.0.i22"
            class="selected"
          />
          <path
            d="M554.11035 216.760983l48.238706 17.556281-184.944477 508.164692-48.238706-17.556281 184.944477-508.164692Z"
            p-id="27822"
            fill="#1296db"
            data-spm-anchor-id="a313x.7781069.0.i21"
            class
          />
          <path
            d="M784.938575 213.493621l84.039105 30.585691-183.101881 503.101864-84.039105-30.585691 183.101881-503.101864Z"
            p-id="27823"
            fill="#d4237a"
          />
        </svg>
      </h1>
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-grid :border="true" :gutter="10" :column-num="2">
          <van-grid-item v-for="(item,idx) of datas" :key="idx">
            <router-link :to="{path:'/goodsDetails',query:{id:item.id}}">
              <div class="img">
                <van-image width="100%" height="100%" lazy-load :src="item.goods_thumb" />
              </div>
            </router-link>
            <div>
              <router-link :to="{path:'/goodsDetails',query:{id:item.id}}">
                <p class="goods_name">{{item.goods_name}}</p>
              </router-link>
              <div class="price clearFix">
                <p>{{item.goods_price | rmb}}</p>
                <!-- 收藏按钮 -->
                <van-icon
                  name="like"
                  :class="(current === item.id) && (active === true) ? 'active' :null "
                  @click="myLike(item.id)"
                />
              </div>
              <div class="comment">
                <p>35个评价&nbsp;&nbsp;98%好评</p>
              </div>
            </div>
          </van-grid-item>
        </van-grid>
      </van-list>
    </div>
  </div>
</template>

<script>
import * as api from "@/api/apiList/goods/goods.js";
export default {
  data() {
    return {
      datas: [],
      current: 0,
      active: false,
      loading: false,
      finished: false
    };
  },
  methods: {
    async API_goods(is_recommend, start_price, end_price) {
      let params = {
        is_recommend,
        start_price,
        end_price
      };
      return await api.goods(params);
    },
    myLike(id) {
      console.log(id);
      this.current = id;
      if (this.active === false) {
        this.active = true;
      } else {
        this.active = false;
      }
    },
    onLoad() {
      setTimeout(() => {
        // 加载状态结束
        this.loading = true;

        // 数据全部加载完成
        if (this.datas.length >= 6) {
          this.finished = true;
        }
      }, 3000);
    }
  },

  async created() {
    let res = await this.API_goods(1, 50, 400);

    if (res.data.code === 200) {
      this.datas = res.data.data.data;
    }
    let that = this;
    window.onscroll = function() {
      // scrollTop 滚动条滚动时，距离顶部的距离
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      // windowHeight 可视区的高度
      var windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      // scrollHeight 滚动条的总高度
      var scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      // 滚动条到底部的条件
      if (scrollTop + windowHeight == scrollHeight) {
        // 加载数据
        that.onLoad();
      }
    };
  }
};
</script>

<style lang="scss" scoped>
@import "@/style/home/shopList.scss";
</style>